<template>
    <div class="view-body">
        <!--筛选-->
        <div class="header-select">
            <ul class="header-select-list">
<!--                <li v-bind:class="{'cur' : isShow1 || (selectType && selectType !== 'All')}" @click="selectedClick1()">{{ $t("knowledge_type") }}</li>&lt;!&ndash;类型&ndash;&gt;-->
                <li v-bind:class="{'cur' : isShow2 || (selectClassify && selectClassify !== 'All')}" @click="selectedClick2()">{{ $t("knowledge_cat") }}</li><!--分类-->
                <li v-bind:class="{'cur': type === 'latest'}" @click="selectSort('latest')">{{ $t("information_new") }}</li><!--最新-->
                <li v-bind:class="{'cur': type === 'hottest'}" @click="selectSort('hottest')">{{ $t("knowledge_hot") }}</li><!--最热-->
<!--                <li v-bind:class="{'cur' : isShow3 || (selectTag && selectTag !== 'All')}" @click="selectedClick3()">{{ $t("knowledge_lab") }}</li>&lt;!&ndash;标签&ndash;&gt;-->
            </ul>
            <!--弹出-->
            <!--类型-->
<!--            <div class="headerSelect-alert1" v-if="isShow1">-->
<!--                <ul>-->
<!--                    <li :class="{'cur': selectType == knlType.type}" v-for="knlType in getTypes" :key="knlType.value" @click="knowledgeTypeSelected(knlType.type)">-->
<!--                        {{ knlType.value }}-->
<!--                        <em class="color999" v-if="knlType.type === 'All'">({{ knowledgeTypeNum.ARTICLE + knowledgeTypeNum.DOCUMENT + knowledgeTypeNum.VEDIO + knowledgeTypeNum.IMAGE }})</em>-->
<!--                        <em class="color999" v-if="knlType.type === 'ARTICLE'">({{ knowledgeTypeNum.ARTICLE }})</em>-->
<!--                        <em class="color999" v-if="knlType.type === 'DOCUMENT'">({{ knowledgeTypeNum.DOCUMENT }})</em>-->
<!--                        <em class="color999" v-if="knlType.type === 'VEDIO'">({{ knowledgeTypeNum.VEDIO }})</em>-->
<!--                        <em class="color999" v-if="knlType.type === 'IMAGE'">({{ knowledgeTypeNum.IMAGE }})</em>-->
<!--                    </li>-->
<!--                </ul>-->
<!--                <div @click="hideViewBox(1)"></div>-->
<!--            </div>-->
            <!--分类-->
            <div class="headerSelect-alert5" v-if="isShow2">
                <ul>
                    <li @click="backClassCatalog()" v-if="oldParentClassId.length > 0">{{$t('to_previous')}}</li>
                    <li v-if="oldClassId.length === 0" :class="{'cur' : selectClassify == 'All'}" @click="selectClassifyAll()">{{ $t("type_all_title") }}</li><!--全部-->
                    <li v-else :class="{'cur' : selectClassify === oldClassId[oldClassId.length-1]}" @click="selectClassifyAll(oldClassId[oldClassId.length-1])">{{ $t("type_all_title") }}</li><!--上级分类-->
                    <li :class="{'cur' : selectClassify == classify.kbcId}" v-for="classify in knowledgeClassify" :key="classify.kbcId" @click="knowledgeClassifySelected(classify.kbcId, classify.kbcParentId)">
                        {{ classify.kbcTitle }}
                    </li>
                </ul>
                <div @click="hideViewBox(2)"></div>
            </div>
            <!--标签-->
<!--            <div class="headerSelect-alert5" v-if="isShow3">-->
<!--                <ul>-->
<!--                    <li :class="{'cur' : selectTag == 'All'}" @click="selectTagAll()">{{ $t("type_all_title") }}</li>&lt;!&ndash;全部&ndash;&gt;-->
<!--                    <li :class="{'cur' : selectTag == tag.tag_id}" v-for="tag in knowledgeTag" :key="tag.tag_id" @click="knowledgeTagSelected(tag.tag_id)">-->
<!--                        {{ tag.tag_title }}-->
<!--                    </li>-->
<!--                </ul>-->
<!--                <div @click="hideViewBox(3)"></div>-->
<!--            </div>-->
        </div>
<!--        <div style="height: calc(100% - 50px);" class="body-content" :class="{'height-100' : total === 0}">-->
        <div style="height: calc(100vh - 50px);" class="body-content" :class="{'height-100' : total === 0}">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                loding-text="loading"
                @load="getDataList"
                >
                    <div v-bind:class="{'height100' : total === 0}">
                        <ul class="white-bg module-list-11">
                            <li class="clearfix" v-for="list in knowledgeList" :key="list.kbi_id" @click="detatilJump(list.kbiId)">
    <!--                            <span class="img-box">-->
    <!--                                <img :src="appUrl + list.kbiImage" alt="" width="100%"/>-->
    <!--                            </span>-->
                                <div>
                                    <p class="word-clamp-2 font-size14"><span class="color999">{{ $t(list.kbiType) }}</span><em class="point"></em>{{ list.kbiTitle }}</p>
                                    <p class="color999 font-size11" style="margin-top: 7px;">
                                        <span>{{ list.kbiPublishDatetime | formTime('splitTime') }}</span>
                                        <span style="float: right;"><em class="browse-icon"></em>{{ list.kbiAccessCount }}</span>
                                        <span style="float: right;margin-right: 10px;"><em class="like-icon"></em>{{ list.valuationCount ? list.valuationCount : '0' }}</span>
                                    </p>
                                </div>
                            </li>
                        </ul>
                        <div class="bottom-shadow" style="height: 1px;margin-top: -1px;" v-if="total > 0"></div>
                        <!--暂无数据-->
                        <div v-if="!isLoading && total === 0" style="height:100%;">
                            <div class="box-table" style="width:100%;height:100%;">
                                <div class="box-table-cell" style="text-align: center;">
                                    <div class="no-data">
                                        <img src="../../../static/images/no-data.png" alt=""/>
                                        <p class="color999">{{ $t('no_data') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <common-loading :isLoading="isLoading"></common-loading>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
import CommonLoading from '@/components/common/loading';
export default {
    name: 'KnowledgeList',
    components: {
        CommonLoading
    },
    data() {
        return {
            pageNo: 1, //分页页码
            knowledgeList: [], //知识列表
            total: 0,
            knowledgeTypeNum: {}, //知识类型总数
            selectType: '', //默认类型
            knowledgeClassify: [], //知识分类
            selectClassify: '', //默认知识分类id
            knowledgeTag: [], //知识标签
            selectTag: '', //知识标签id
            isShow1: false,
            isShow2: false,
            isShow3: false,
            getTypes: [
                {type: 'All', value: this.$t('type_all_title')}, //全部
                {type: 'ARTICLE', value: this.$t('ARTICLE')}, //文章
                {type: 'DOCUMENT', value: this.$t('DOCUMENT')}, //文档
                {type: 'VEDIO', value: this.$t('VEDIO')}, //视频
                {type: 'IMAGE', value: this.$t('IMAGE')} //图片
            ],
            isLoading: true,
            type: 'latest', //最新最热
            oldClassId: [], //层级分类id
            oldParentClassId: [], //层级分类父id
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        selectSort(type) {
            this.knowledgeList = [];
            this.pageNo = 1;
            switch (type) {
            case 'latest':
                this.type = 'latest';
                break;
            case 'hottest':
                this.type = 'hottest';
                break;
            }
            this.isLoading = true;
            this.getDataList();
        },
        init() {
            //知识列表加载
            this.getDataList();
            //知识类型总数
            // this.$axios({
            //     method: 'GET',
            //     url: '/app/kb/center/queryCatalogKnowledgeCount'
            // }).then((res) => {
            //     this.knowledgeTypeNum = res.data;
            // });
            this.findKbCatalog();
            //知识标签
            // this.$axios({
            //     method: 'POST',
            //     url: '/app/kb/tag/admin/getTagJson'
            // }).then((res) => {
            //     this.knowledgeTag = res.data;
            // });
        },
        findKbCatalog(parentId) {
            if (!parentId) {
                parentId = 0;
            }
            //知识分类
            this.$axios({
                method: 'GET',
                // url: '/app/kb/catalog/admin/getCatalogJson'
                url: `/app/api/trainee/kb/item/tree`,
                params: {
                    kbcTcrId: 0,
                    parentId: parentId
                }
            }).then((res) => {
                this.knowledgeClassify = res.data;
            });
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getDataList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        hideViewBox(num) {
            this['isShow' + num] = false;
        },
        selectedClick1() {
            this.isShow1 = !this.isShow1;
            this.isShow2 = false;
            this.isShow3 = false;
        },
        selectedClick2() {
            this.isShow1 = false;
            this.isShow2 = !this.isShow2;
            this.isShow3 = false;
        },
        selectedClick3() {
            this.isShow1 = false;
            this.isShow2 = false;
            this.isShow3 = !this.isShow3;
        },
        getDataList(option) { //列表请求方法
            this.$axios({
                method: 'POST',
                // url: '/app/kb/center/index/indexJson',
                url: `/app/api/trainee/kb/item/list`,
                params: {
                    pageNo: this.pageNo,
                    // sortname: 'kbi_publish_datetime',
                    sortname: '',
                    // sortorder: 'desc',
                    sortorder: ''
                    // kbi_type: this.selectType === 'All' ? '' : this.selectType,
                    // kbc_id: this.selectClassify === 'All' ? '' : this.selectClassify,
                    // tag_id: this.selectTag === 'All' ? '' : this.selectTag
                },
                data: {
                    catalogId: this.selectClassify === 'All' ? 0 : this.selectClassify,
                    type: this.type,
                    isMobile: true
                }
            }).then((res) => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.knowledgeList = res.data.results;
                    } else {
                        this.knowledgeList = [...this.knowledgeList, ...res.data.results];
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.knowledgeList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        knowledgeTypeSelected(knowledgeType) { //知识类型筛选
            this.isShow1 = false;
            this.knowledgeList = [];
            this.pageNo = 1;
            this.isLoading = true;
            this.selectType = knowledgeType;
            this.getDataList();
        },
        //知识分类“全部”按钮
        selectClassifyAll(classCataId) {
            this.isShow2 = false;
            this.knowledgeList = [];
            this.pageNo = 1;
            this.isLoading = true;
            if (classCataId) {
                if (this.selectClassify === classCataId) {
                    this.isLoading = false;
                    return;
                }
                this.selectClassify = classCataId;
            } else {
                this.selectClassify = 'All';
            }
            this.getDataList();
        },
        //回退目录分类
        backClassCatalog() {
            this.findKbCatalog(this.oldParentClassId[this.oldParentClassId.length - 1]);
            this.oldClassId.splice(this.oldClassId.length - 1, 1);
            this.oldParentClassId.splice(this.oldParentClassId.length - 1, 1);
        },
        //知识分类筛选
        knowledgeClassifySelected(knowledgeClassify, kbcParentId) {
            let isQuestDataList = this.selectClassify !== knowledgeClassify;
            // this.isShow2 = false;
            this.knowledgeList = [];
            this.pageNo = 1;
            this.isLoading = true;
            this.selectClassify = knowledgeClassify;
            // this.oldClassId.push(knowledgeClassify);
            // this.oldParentClassId.push(kbcParentId);
            if (isQuestDataList) {
                this.getDataList();
            } else {
                this.isLoading = false;
            }
            // this.findKbCatalog(knowledgeClassify);
            if (this.oldParentClassId.length < 2) {
                this.oldClassId.push(knowledgeClassify);
                this.oldParentClassId.push(kbcParentId);
                this.findKbCatalog(knowledgeClassify);
            } else {
                this.isShow2 = false;
            }
        },
        //知识标签“全部”按钮
        selectTagAll() {
            this.isShow3 = false;
            this.knowledgeList = [];
            this.isLoading = true;
            this.pageNo = 1;
            this.selectTag = 'All';
            this.getDataList();
        },
        //知识标签筛选
        knowledgeTagSelected(knowledgeTag) {
            this.isShow3 = false;
            this.knowledgeList = [];
            this.isLoading = true;
            this.pageNo = 1;
            this.selectTag = knowledgeTag;
            this.getDataList();
        },
        detatilJump(id) {
            // let kbiId = this.wbEncryptor(id);
            this.$router.push({path: `/knowledgeDetail/${id}`});
        }
    },
    mounted() {
        this.init();
    }
};
</script>

<style scoped>
    .headerSelect-alert5 ul {
        margin: 0;
        padding: 20px 15px 0;
    }
    .clearfix {
        padding-left: 20px;
    }
</style>
